import React, { Component } from 'react';
import { Router } from 'utils/router';
import Loadable from 'utils/loadable';
import SpaceNav from './nav';
import ProjectsComponent from '../../pages/projects';
import ComponentWithReducers from 'utils/loadable/reducers';
import { Layout } from '@alife/devops-ui';
import '../../index.scss';

// 企业-代码库页面是大多数用户的landing入口，为了整体性能，不做分包
const Projects = (props) => {
  return (
    <ComponentWithReducers
      reducers={ProjectsComponent.reducers}
      component={ProjectsComponent}
      props={props}
    />
  );
};

const Groups = Loadable({
  loader: () => import('../../pages/groups'),
});
const MergeRequests = Loadable({
  loader: () => import('../../pages/mergeRequests'),
});
const Audit = Loadable({
  loader: () => import('../../pages/settings/pages/audit'),
});
const Risk = Loadable({
  loader: () => import('../../pages/settings/pages/risk'),
});
const Trashes = Loadable({
  loader: () => import('../../pages/trashes'),
});

const { path, organization_id } = window.FORCE.organization;

export default class Home extends Component {
  constructor(props) {
    super(props);

    this.beforeShow = this.beforeShow.bind(this);
    this.afterClose = this.afterClose.bind(this);
    this.state = {
      isStick: window.localStorage.isSidebarStick === 'true',
    };
  }

  UNSAFE_componentWillMount() {
    window.sessionStorage.removeItem('gitee');
  }

  renderMain = () => {
    return (
      <Router basepath="/" primary={false} component={Layout} fullPage>
        <Projects path="/" />
        <Groups path="/groups" />
        <MergeRequests path="/merge_requests" />
        <Trashes path="/trashes" />
        <Audit path="/audit" />
        <Risk path="/risk_control" activeTab="behavior" />
        <Projects path={`/${path}`} />
        <Projects path={`${organization_id}`} />
      </Router>
    );
  };

  beforeShow(callback) {
    callback();
  }
  afterClose() {}
  onSidebarChange = (isStick, notClick) => {
    if (!notClick) {
      localStorage.isSidebarStick2 = isStick ? 'true' : 'false';
    }
    this.setState({
      isStick,
    });
  };
  render() {
    const { newbieTaskStatus, welcomeDialogStatus, newbieTaskExpandStatus, location } = this.props;
    const { isStick } = this.state;
    return (
      <div className={isStick ? 'is-stick' : ''}>
        <SpaceNav
          onSidebarChange={this.onSidebarChange}
          pathname={location.pathname}
          beforeShow={this.beforeShow}
          afterClose={this.afterClose}
          newbieTaskStatus={newbieTaskStatus}
          welcomeDialogStatus={welcomeDialogStatus}
          newbieTaskExpandStatus={newbieTaskExpandStatus}
        />
        {this.renderMain()}
      </div>
    );
  }
}
